<template>
  <div class="container">
    <VerticalLayout>
      <!-- 插入搜索组件 -->
      <template #search>
        <el-space alignment="center">
          <DynamicQueryForm
            :show-match-range="true"
            :extra-fields="extraField"
            :columns-values="columnsValues"
            @submit="onSubmit"
          />
        </el-space>
      </template>

      <!-- 插入表格组件 -->
      <template #table>
        <CustomTable
          ref="customTableRef"
          :actions="getSalesmanList"
          :columns="columns"
          show-selection
          show-pagination
          @selection-change="onSelectionChange"
        >
          <!-- 左边功能 -->
          <template #action-left> </template>

          <!-- 右边功能 -->
          <template #action-right>
            <!-- <el-button :icon="Refresh" circle /> -->
          </template>

          <template #table-top v-if="selections.length > 0">
            <el-alert :closable="false">
              <template #title>
                {{ `您已选择${selections.length}条订单，是否需要` }}
                <el-button class="alertFpBtn" type="primary" size="small" text @click="onAllocation"
                  >批量分配</el-button
                >
              </template>
            </el-alert>
          </template>

          <!-- 客户信息 -->
          <template #logisticsSlot="{ row }">
            <RowSlots
              slotName="logisticsSlot"
              :row="afterSaleCustomer(row)"
              @click="payHistory(row)"
            />
          </template>

          <!-- 售后状态 -->
          <template #afterSaleStatusSlot="{ row }">
            <RowSlots slotName="afterSaleStatusSlot" :row="row" />
          </template>
          <!-- 订单发货状态 sendStatus 1未发货 2已发货 -->
          <template #sendStatusSlot="{ row }">
            <el-tag
              :type="row.sendStatus === 1 ? 'warning' : 'success'"
              :effect="row.sendStatus === 1 ? 'light' : 'dark'"
              size="small"
            >
              {{ row.eTag === 1 ? '未发货' : '已发货' }}
            </el-tag>
          </template>

          <!-- 售后单号 -->
          <template #returnDeliverNoSlot="{ row }">
            <el-space>
              <div v-if="row.returnDeliverName">{{ row.returnDeliverName }}</div>
              <div v-if="row.returnDeliverNo">{{ row.returnDeliverNo }}</div>
              <div v-if="!row.returnDeliverName && !row.returnDeliverNo">暂无数据</div>
            </el-space>
          </template>

          <!-- 售后类型 -->
          <template #saleTypeSlot="{ row }">
            <RowSlots slotName="saleTypeSlot" :row="row" />
          </template>

          <!-- 售后物流状态 -->
          <template #logisticsStatusSlot="{ row }">
            <RowSlots slotName="afterLogisticsStatusSlot" :row="row" />
          </template>

          <!-- 业务员信息 -->
          <template #salesmanSlot="{ row }">
            <RowSlots slotName="salesmanSlot" :row="afterSaleCustomer(row)" />
          </template>

          <!-- 备注 -->
          <template #remarkSlot="{ row }">
            <RowSlots
              slotName="remarkSlot"
              :row="row"
              @showCustomerFollowUp="showCustomerFollowUp"
            />
          </template>
        </CustomTable>
      </template>
    </VerticalLayout>

    <!-- 跟进详情 -->
    <CustomerFollowUp ref="customerFollowUpRef" @ok="customTableRef?.refresh" />
    <!-- 用户下单记录 -->
    <CustomerOrderHistory ref="customerOrderHistoryRef" />
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { columns } from './columns';
import { cloneDeep } from 'lodash';
import { onMounted, reactive, ref } from 'vue';
import { columnsValues, extraField } from './searchOptions';
import { getSalesmanList } from '../../../api/sale';
import { useCustomStore } from '../../../store/modules/custom';

const customStore = useCustomStore();
// table
const customTableRef = ref();
// 跟进详情
const customerFollowUpRef = ref();
// 批量下发
const batchAllocationRef = ref();
// 用户下单记录
const customerOrderHistoryRef = ref();

// 选中项
const selections = ref<any>([]);

const onSelectionChange = (selection: any[]) => {
  selections.value = selection;
};

// 售后单 客户信息转换
const afterSaleCustomer = (row: any) => {
  if (row.customer) {
    const args: any = {
      receiverName: row.customer.customerName,
      receiverPhone: row.customer.customerPhone,
      receiverAddress: row.customer.contactAddress
    };
    const salesman = row.customer.salesman;
    if (salesman) {
      args.salesmanId = salesman.salesmanId;
      args.salesmanName = salesman.salesmanName;
      args.salesmanDept = salesman.dept.deptName;
    }

    return args;
  }
  return {};
};

// 批量分配
const onAllocation = (row: any) => {
  if (row) {
    batchAllocationRef.value?.show([row]);
    return;
  }

  if (selections.value.length === 0) {
    ElMessage.warning('请先选择订单');
    return;
  }
  batchAllocationRef.value?.show(cloneDeep(selections.value));
};
// 显示跟踪备注
const showCustomerFollowUp = (row: any, typeCode: number) => {
  customerFollowUpRef.value?.show(row, typeCode);
};

// 查看订单记录
const payHistory = (row: any) => {
  customerOrderHistoryRef.value?.show(row);
};

// 查询条件
const formInline = reactive({
  user: '',
  region: '',
  date: null,
  keyValue: ''
});

const onSubmit = () => {
  customTableRef.value?.search(formInline);
};

onMounted(() => {
  // 初始化类别数据
  customStore.initCustom();
});
</script>

<style scoped lang="scss">
.container {
  padding: 16px;

  .productName {
    font-weight: bold;
  }

  .alertFpBtn {
    padding-left: 0;
    padding-right: 0;
  }

  .payCount {
    cursor: pointer;
  }

  .remarkBox {
    .newReamark {
      display: block;
      text-wrap: wrap;
      text-align: left;
      line-height: 18px;
      font-size: 13px;
      margin-bottom: 5px;
    }
  }
}
</style>
